<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body {
			background-color:#d34c65;
			text-align:center;
		}
		.lian-lo {
			display: inline-block;
			position:absolute;
			top:50%;
			left:50%;
			-ms-transform:translate(-50%,-50%);
			-webkit-transform:translate(-50%,-50%);
			transform:translate(-50%,-50%);
		}
		/* 图标 */
		.lian-lo a {
			color:#fff;
			background: #DB6E82;
			border-radius:4px;
			text-align:center;
			text-decoration:none;
			position: relative;
			display: inline-block;
			width:40px;
			height:28px;
			padding-top:12px;
			margin:0 2px;
			transition: all .5s;
		}

		.lian-lo a:hover {
			background: #ef92a3;
		}
		.lian-lo a span {
			color:#666;
			position:absolute;
			font-family:sans-serif;
			bottom:0;
			left:-25px;
			right:-25px;
			padding:5px 7px;
			z-index:-1;
			font-size:14px;
			border-radius:2px;
			background:#fff;
			visibility:hidden;
			opacity:0;
			-o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			-webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			-moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}
		/*三角*/
		.lian-lo a span:before {
			content:'';
			width: 0; 
			height: 0; 
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 5px solid #fff;
			position:absolute;
			bottom:-5px;
			left:40px;
		}


		.lian-lo a:hover span {
			bottom:50px;
			visibility:visible;
			opacity:1;
		}
	</style>
</head>
<body>
	<div class="lian-lo">
		<a href="#">a<span>Facebook</span></a>
		<a href="#">a<span>Twitter</span></a>
		<a href="#">a<span>Google+</span></a>
		<a href="#">a<span>Github</span></a>
		<a href="#">a<span>Dribbble</span></a>
		<a href="#">a<span>CodePen</span></a>
	</div>
	<!-- partial -->

</body>
</html>